1import {useState, useMemo, PropsWithChildren} from 'react';
 2import useProfile from '../../../hooks/useProfile';
 3import WaitingList from '../../../containers/WaitingList';
 4import pageUtils from '../../../lib/pageUtils';
 5import EventLayout, {TabComponent} from '../../../layouts/Event';
 6import {AddPassengerToWaitingList} from '../../../containers/NewPassengerDialog';
 7import {EventByUuidDocument} from '../../../generated/graphql';
 8
 9interface NewPassengerDialogContext {
10  addSelf: boolean;
11}
12
13interface Props {
14  eventUUID: string;
15  announcement?: string;
16}
17
18const Page = (props: PropsWithChildren<Props>) => {
19  return <EventLayout {...props} Tab={WaitingListTab} />;
20};
21
22const WaitingListTab: TabComponent = ({event}) => {
23  const {userId} = useProfile();
24  const [addPassengerToWaitingListContext, toggleNewPassengerToWaitingList] =
25    useState<NewPassengerDialogContext | null>(null);
26
27  const registered = useMemo(() => {
28    if (!userId) return false;
29    const isInWaitingList = event?.waitingPassengers?.data?.some(
30      passenger => passenger.attributes.user?.data?.id === `${userId}`
31    );
32    return isInWaitingList;
33  }, [event, userId]);
34
35  return (
36    <>
37      <WaitingList
38        registered={registered}
39        canAddSelf={!!userId}
40        getToggleNewPassengerDialogFunction={(addSelf: boolean) => () =>
41          toggleNewPassengerToWaitingList({addSelf})}
42      />
43      {!!addPassengerToWaitingListContext && (
44        <AddPassengerToWaitingList
45          open={!!addPassengerToWaitingListContext}
46          toggle={() => toggleNewPassengerToWaitingList(null)}
47          addSelf={addPassengerToWaitingListContext.addSelf}
48        />
49      )}
50    </>
51  );
52};
53
54export const getServerSideProps = pageUtils.getServerSideProps(
55  async (context, apolloClient) => {
56    const {uuid} = context.query;
57    const {host = ''} = context.req.headers;
58    let event = null;
59
60    // Fetch event
61    try {
62      const {data} = await apolloClient.query({
63        query: EventByUuidDocument,
64        variables: {uuid},
65      });
66      event = data?.eventByUUID?.data;
67    } catch (error) {
68      return {
69        notFound: true,
70      };
71    }
72
73    return {
74      props: {
75        eventUUID: uuid,
76        metas: {
77          title: event?.attributes?.name || '',
78          url: `https://${host}${context.resolvedUrl}`,
79        },
80      },
81    };
82  }
83);
84
85export default Page;